<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram of Blocks and Spring</title>
</head>
<body>
<canvas id="physicsCanvas" width="600" height="400" style="border:1px solid #d3d3d3;"></canvas>
<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // --- Style Settings ---
    ctx.strokeStyle = 'black';
    ctx.lineWidth = 2;
    ctx.fillStyle = 'black';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    // --- Drawing Functions ---

    /**
     * Draws a rectangle with an optional label inside.
     * @param {number} x - The x-coordinate of the top-left corner.
     * @param {number} y - The y-coordinate of the top-left corner.
     * @param {number} width - The width of the rectangle.
     * @param {number} height - The height of the rectangle.
     * @param {string} label - The text label to display in the center.
     */
    function drawBlock(x, y, width, height, label) {
        // Fill with white to make it opaque over other lines
        ctx.fillStyle = 'white';
        ctx.fillRect(x, y, width, height);
        // Draw the black border
        ctx.strokeRect(x, y, width, height);
        // Draw the label
        if (label) {
            ctx.fillStyle = 'black';
            ctx.font = '24px Arial';
            ctx.fillText(label, x + width / 2, y + height / 2);
        }
    }

    /**
     * Draws a spring as a sawtooth wave.
     * @param {number} startX - The starting x-coordinate.
     * @param {number} y - The vertical center y-coordinate.
     * @param {number} endX - The ending x-coordinate.
     * @param {number} coils - The number of "peaks".
     * @param {number} amplitude - The height of the peaks from the center line.
     */
    function drawSpring(startX, y, endX, coils, amplitude) {
        const length = endX - startX;
        const coilWidth = length / coils;
        let currentX = startX;

        ctx.beginPath();
        ctx.moveTo(currentX, y);
        for (let i = 0; i < coils; i++) {
            ctx.lineTo(currentX + coilWidth / 2, y - amplitude);
            ctx.lineTo(currentX + coilWidth, y);
            currentX += coilWidth;
        }
        ctx.stroke();
    }


    // --- Main Drawing Logic ---

    // 1. Draw the ground/surface
    const groundY = 300;
    const groundStartX = 40;
    const groundEndX = 560;
    ctx.beginPath();
    ctx.moveTo(groundStartX, groundY);
    ctx.lineTo(groundEndX, groundY);
    ctx.stroke();

    // Draw hatching for the ground
    const hatchLength = 15;
    const hatchAngle = Math.PI / 4;
    for (let x = groundStartX; x < groundEndX; x += 20) {
        ctx.beginPath();
        ctx.moveTo(x, groundY);
        ctx.lineTo(x - hatchLength * Math.cos(hatchAngle), groundY + hatchLength * Math.sin(hatchAngle));
        ctx.stroke();
    }

    // 2. Define block properties and positions
    const blockA_W = 100;
    const blockA_H = 80;
    const blockA_X = 100;
    const blockA_Y = groundY - blockA_H;

    const blockC_W = 60;
    const blockC_H = 50;
    const blockC_X = blockA_X + (blockA_W - blockC_W) / 2;
    const blockC_Y = blockA_Y - blockC_H;

    const blockB_W = 100;
    const blockB_H = 80;
    const blockB_X = 400;
    const blockB_Y = groundY - blockB_H;

    const blockD_W = 60;
    const blockD_H = 50;
    const blockD_X = blockB_X + (blockB_W - blockD_W) / 2;
    const blockD_Y = blockB_Y - blockD_H;

    // 3. Draw the blocks with their labels
    drawBlock(blockA_X, blockA_Y, blockA_W, blockA_H, 'A');
    drawBlock(blockC_X, blockC_Y, blockC_W, blockC_H, 'C');
    drawBlock(blockB_X, blockB_Y, blockB_W, blockB_H, 'B');
    drawBlock(blockD_X, blockD_Y, blockD_W, blockD_H, 'D');

    // 4. Draw the spring connecting A and B
    const springY = blockA_Y + blockA_H / 2;
    const springStartX = blockA_X + blockA_W;
    const springEndX = blockB_X;
    const springAmplitude = 15;
    const springCoils = 8;
    drawSpring(springStartX, springY, springEndX, springCoils, springAmplitude);

    // 5. Draw the caption text below the diagram
    ctx.fillStyle = 'black';
    ctx.font = '24px KaiTi'; // A font that reliably supports Chinese characters
    ctx.fillText('题 9 图', canvas.width / 2, groundY + 50);

</script>
</body>
</html>